<template>
    <div>
        <v-top>
            <h3>商品详情</h3>
        </v-top>
                <!-- 导航栏 -->
        <nav>
            <ul class="nav-sort">
                <li class="fontSize">
                    <a href="#">商品</a>
                    <span></span>
                </li>
                <li>
                    <a href="#">评价</a>
                    <span></span>
                </li>
                <li>
                    <a href="#">详情</a>
                    <span></span>
                </li>
                <li>
                    <a href="#">推荐</a>
                    <span></span>
                </li>
            </ul>
        </nav>
        <!-- 中间内容 -->
        <article class="content">
            <!-- 广告 -->
            <section class="banner">
                <ul>
                    <li>
                        <img :src="detail.img" alt="商品">
                    </li>
                </ul>
                <div class="share iconfont icon-fenxiang font32"></div>
                <div class="navList font28">8/8</div>
            </section>
            <!-- 商品介绍 -->
            <div class="introduce">
                <p class="money">
                    <b class="font28">￥</b>
                    <span>{{detail.price}}</span>
                    <del class="font28">￥{{detail.market_price}}</del>
                    <span class="money-collect font20">
                        <i class="iconfont icon-xing1"></i>
                        <span class="right">收藏</span>
                    </span>
                </p>
                <h4 class="font32">{{detail.goodsname}}</h4>
                <p class="comIntroduce font28">敏感肌可用，控油祛痘、男女可用、泡沫绵密、净透毛孔</p>
                <div class="bgFF8066 font20">11.11限时299元起</div>
                <div class="bgF2">
                    <span class="font20">此商品于2020-11-11,00点结束闪购特卖，品牌美妆闪购专场</span>
                    <a href="#" class="font20">
                        查看
                        <i class="iconfont icon-arrow-right font20"></i>
                    </a>
                </div>
            </div>
            <!-- 领卷分期 -->
            <dl class="coupon">
                <dt class="font24">领券</dt>
                <dd class="font20">
                    <a href="#">
                        300
                    </a>
                    <a href="#">
                        50
                    </a>
                    <a href="#">
                        10
                    </a>
                </dd>
            </dl>
            <dl class="stages">
                <dt class="font24">分期</dt>
                <dd class="font24">
                    可选3/6/12期
                    <i class="font24 iconfont icon-arrow-right"></i>
                </dd>
            </dl>
        </article>
        <!-- 底部 -->
        <footer class="footer">
            <section>
                <ul class="left">
                    <li>
                        <img src="../assets/img/hotline.png" alt="客服">
                        <span>客服</span>
                    </li>
                    <li>
                        <img src="../assets/img/store.png" alt="店铺">
                        <span>店铺</span>
                    </li>
                    <li @click="toCart">
                        <img src="../assets/img/shoppingcart.png" alt="购物车">
                        <span>购物车</span>
                    </li>
                </ul>
                <div class="right">
                    <input type="button" class="addCart font32" value="加入购物车" @click="addCart(detail.id)">
                    <input type="button" class="buyNow font32" value="立即购买">
                </div>
            </section>
        </footer>
    </div>
    <!-- 

        description: ""
        first_cateid: 3
        goodsname: "华为MateBook13"
        id: 5
        img: "/uploads/2a3e16d0-5ef6-11eb-8407-bb52993c067f.jpg"
        ishot: 1
        isnew: 2
        market_price: 4597
        number: 100
        price: 4299
        second_cateid: 11
        specsattr: "白色"
        specsid: 3
        specsname: "颜色"
        status: 1
     -->
</template>

<script>
import {getgoodsinfo} from '../utils/api'
export default {
    data() {
        return {
            id:-1,
            detail:{},
        };
    },
    methods:{
        //加入购物车 请求仓库的数据
        addCart(id){
            let uid = JSON.parse(localStorage.getItem('user')).uid
            this.$store.dispatch('cartadd_g',{uid,goodsid:id,num:1})
        },
        //跳转的事件
        toCart(){
            this.$router.push('/cart')
        }
    },
    mounted() {
        this.id = this.$route.params.id
        getgoodsinfo(this.id).then(res=>{
            if(res.code == 200){
                this.detail = res.list[0]
            }
        }).catch(err=>{ 
            console.log(err);
        })
    },
    watch:{
        // id(newVal,oldVal){
        //     console.log(this.$route.params.id);
        //     console.log(newVal,'新值');
        //     console.log(oldVal,'老值');
        // }
    },
    updated() {
        
    },
};
</script>

<style scoped>
@import '../assets/css/commodityDetails.css'
</style>
